/* 显示用户账户名 */
function showUserMessage() {
    let userStr = localStorage.getItem('USER')
    let data = JSON.parse(userStr)
    var loginHtml = template('userInfor', data)
    $('#header .right').html(loginHtml)
}

//localstorage获取数据
let stateAllStr = localStorage.getItem('STATEALL')
let stateAll = JSON.parse(stateAllStr) || false
//全选状态
let cartListStr = localStorage.getItem('CART')
let cartList = JSON.parse(cartListStr) || []
/**
 * 显示购物车列表
 */
function showCartList() {
    let data = {
        cartList,
        stateAll
    }
    let cartStr = template('cartList', data)
    $('table').html(cartStr)

    onCheckAll() //只要重新加载购物车列表数据，绑定事件
    onCheckItem()
    onPlus()
    onMinus()
    onDelete()
    allProductsPrice()
    onBlurTotal()
    localStorage.setItem('CART', JSON.stringify(cartList))
    localStorage.setItem('STATEALL', stateAll)
}

/**
 * 全选
 */
function onCheckAll() {
    //全选事件处理
    $('input[name="checkAll"]')
        .unbind('click')
        .bind('click', function () {
            if (stateAll == false) {
                stateAll = true
            } else {
                stateAll = false
            }

            //2. 获取所有复选框,根据全选状态改变复选状态值
            //  $('input[name="checkItem"]') => 不操作节点，操作数组

            cartList.forEach((item) => {
                if (stateAll) {
                    item.state = true
                } else {
                    item.state = false
                }
            })

            // 3. 持久存储到localstorage
            localStorage.setItem('CART', JSON.stringify(cartList))
            localStorage.setItem('STATEALL', stateAll)

            // 4. 重新加载购物车列表
            showCartList()
        })
}

/**
 * 复选
 */

/* 复选框处理函数 */
function onCheckItem() {
    //复选框事件处理
    $('input[name="checkItem"]')
        .unbind('click')
        .on('click', function () {
            // 设置复选框状态
            let id = $(this).attr('data-index')
            let product = cartList.find((item) => item.id == id)

            if (product.state) {
                product.state = false
            } else {
                product.state = true
            }

            // 根据所有复选框状态设置全选框状态
            // 所有复选框state=true的元素个数与复选框总长度相同，则全选，否则未全选
            let list = cartList.filter((item) => item.state == true)
            if (list.length == cartList.length) {
                //全选
                stateAll = true
            } else {
                stateAll = false
            }

            // 3. 持久存储到localstorage
            localStorage.setItem('CART', JSON.stringify(cartList))
            localStorage.setItem('STATEALL', stateAll)

            // 4. 重新加载购物车列表
            showCartList()
        })
}

/**
 * @description: 点击加号，实现商品数量添加，并重新渲染页面
 */
function onPlus() {
    $('input[name="plus"]').unbind('click').on('click', function () {
        let index = $(this).attr('data-index')
        cartList[index].num++
        showCartList()
    })
}
/**
 * @description: 点击减号号，实现商品数量减少，并重新渲染页面
 */
function onMinus() {
    $('input[name="minus"]').unbind('click').on('click', function () {
        let index = $(this).attr('data-index')
        cartList[index].num--
        if (cartList[index].num < 1) {
            cartList[index].num = 1
        }
        showCartList()
    })
}
/**
 * @description: 点击删除，删除商品，并重新渲染页面
 */
function onDelete() {
    $('.delete').unbind('click').on('click', function () {
        let index = $(this).attr('data-index')
        cartList.splice(index, 1)
        showCartList()
    })
}
/**
 * @description: 点击商品详情，跳转到对应的商品详情页面
 */
function onDetail() {
    $('.detail').unbind('click').on('click', function () {
        let index = $(this).attr('data-index')
        location.href = "./productInfor.html?id=" + index
    })
}
/**
 * @description: 计算所有选中商品的总价
 */
function allProductsPrice() {
    let newProducts = cartList.filter(item => {
        return item.state == true //返回选中的输入框的商品信息
    })
    let total = 0

    newProducts.forEach(item => {
        total += Number(item.singleTotal)
    })
    $('.total-price').html(`￥${total.toFixed(2)}`)
}
/**
 * @description: 输入框失焦自动计算总价
 */
function onBlurTotal() {
    $('input[name="amount"]').unbind('blur').on('blur', function () {
        let index = $(this).attr('data-index')
        let amount = $(this).val()
        console.log(amount)
        if (amount < 1) {
            amount = 1
            alert('商品最小数量不能小于1')
        }
        console.log(cartList)
        cartList[index].num = Number(amount)
        showCartList()
    })

}

showUserMessage()
showCartList()
onDetail()